// src/composables/useFingerSwipe.ts
import { ref, onMounted, onUnmounted, Ref } from 'vue';

interface SwipeOptions {
  // 限制滑动的最大范围（可选，避免元素滑出可视区域）
  maxY?: number;
  minY?: number;
}

export function useFingerSwipe(elementRef: Ref<HTMLElement | null>, options: SwipeOptions = {}) {
  // 记录当前元素的位移（垂直方向为例）
  const y = ref(0);
  // 记录手指起始位置
  let startY = 0;
  // 记录触摸开始时元素的初始位移
  let initialY = 0;

  // 触摸开始：记录起始位置
  const handleTouchStart = (e: TouchEvent) => {
    startY = e.touches[0].clientY; // 手指初始Y坐标
    initialY = y.value; // 元素当前的位移
  };

  // 触摸移动：计算位移并更新元素位置
  const handleTouchMove = (e: TouchEvent) => {
    if (!elementRef.value) return;

    const moveY = e.touches[0].clientY - startY; // 手指移动的距离
    let newY = initialY + moveY; // 元素新的位移

    // 边界限制（可选，根据需求配置）
    if (options.maxY !== undefined && newY > options.maxY) {
      newY = options.maxY;
    }
    if (options.minY !== undefined && newY < options.minY) {
      newY = options.minY;
    }

    y.value = newY; // 更新位移
  };

  // 触摸结束：可选添加惯性、回弹等效果（简化版暂不实现）
  const handleTouchEnd = () => {
    // 可扩展：添加滑动惯性、超出边界后的回弹动画等
  };

  // 绑定事件
  onMounted(() => {
    const el = elementRef.value;
    if (el) {
      el.addEventListener('touchstart', handleTouchStart);
      el.addEventListener('touchmove', handleTouchMove, { passive: false }); // passive设为false，避免无法阻止默认滚动
      el.addEventListener('touchend', handleTouchEnd);
    }
  });

  // 解绑事件（避免内存泄漏）
  onUnmounted(() => {
    const el = elementRef.value;
    if (el) {
      el.removeEventListener('touchstart', handleTouchStart);
      el.removeEventListener('touchmove', handleTouchMove);
      el.removeEventListener('touchend', handleTouchEnd);
    }
  });

  return {
    y, // 元素当前的垂直位移
  };
}